<template>
  <div class="comment-input">
    <textarea placeholder="输入你的评论" v-model="commentValue"></textarea>
    <div class="btn" @click="handleClick">提交</div>
    <div class="overlay" v-if="!username">
      <p>
        您尚未登陆，请
        <router-link to="/login">登录</router-link>
        或
        <router-link to="/register">注册</router-link>
        后评论
      </p>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed, ref } from 'vue'
  import { useStore } from 'vuex'
  import { postComment } from 'src/services/comment/'
  export default defineComponent({
    props: {
      slug: {
        type: String,
        required: true
      }
    },
    emits: ['flush-comments'],
    setup (props, { emit }) {
      const store = useStore()
      const username = computed(() => store.state.user.username)
      const commentValue = ref<string>('')
      const handleClick = () => {
        if (commentValue.value.trim() !== '') {
          postComment(props.slug, commentValue.value)
          emit('flush-comments')
          commentValue.value = ''
        }
      }
      return {
        username,
        commentValue,
        handleClick
      }
    }
  })
</script>

<style lang="scss" scoped>
  @import "src/assets/scss/variables.scss";
  .comment-input {
    width: 70%;
    height: 110px;
    margin: 0 auto;
    border: 1px solid #E6E6E6;
    border-radius: 3px;
    position: relative;
    display: flex;
  }
  textarea {
    flex: 1;
    outline: none;
    border: none;
    padding: 20px;
    line-height: 1.5;
    resize: none;
  }
  .btn {
    width: 10%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    a {
      color: ching;
    }
  }
</style>